<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="root">
        <p>{{str}}</p>
        <p>{{"字符串2"}}</p>
        <p>字符串3</p>
        <p>{{num}}</p>
        <p>{{100}}</p>
        <p>100</p>
        <p>{{bol}}</p>
        <p>{{false}}</p>
        <p>undefined:{{un}}</p>
        <p>null:{{nl}}</p>
        <p>{{one}}</p>
        <p>{{two}}</p>
        <p>{{three}}</p>
        <p>{{arr}}</p>
        <p>{{arr2}}</p>
        <p>{{obj}}</p>
        <p>{{fn}}</p>
<!--        <p>{{{a:1}}</p>-->
        <p>{{[1,2,3,4]}}</p>
        <p>{{[{a:1}]}}</p>
        <p>{{str.split("").reverse().join("")}}</p>
        <p>{{fn()}}</p>
    </div>
</body>
<script>
    // 注意1：数据为undefined或null，模板中不会渲染任何内容。
    // 注意2：空字符串不会渲染
    // 注意3：不支持直接在插值表达式中写对象字面量
    new Vue({
        el:"#root",
        data:{
			str:"字符串",
            num:100,
            bol:true,
            un:undefined,
            nl:null,
            one:"",
            two:'',
            three:``,
            arr:[1,2,3,4,5],
            arr2:[{a:1},{a:2}],
            obj:{username:"zhangsan"},
            fn(){
                return "abc"
            }
        }
    })
	// console.log(JSON.stringify([1,2,3,4,5]))
	// console.log({a:1}.toString())
</script>
</html>